@extends('layouts.default')
@section('title', '数据定义管理')

@push('scripts')
<script>
    var totalNUm = 0;
    var table;
    var form;
    var laypage;
    var layer;
    var laydate;
    var filters = {};
    var addLayer;
    var editLayer;
    var id = '';
    var per_page = 10;

    $(function(){
        layui.use(['table', 'form', 'element', 'laypage'], function() {
            table = layui.table;
            element = layui.element;
            form = layui.form;
            laypage = layui.laypage;
            layer = layui.layer;

            getList(1, per_page);

            // 搜索
            form.on('submit(queryBtn)', function(data) {
                filters = Object.assign({}, data.field);
                getList(1, per_page);
                renderPageBar(1);
                return false;
            });
            // 重置
            form.on('submit(resetBtn)', function(data) {
                filters = {};
                $('#qryForm')[0].reset();
                getList(1, per_page);
            });

            // 新增提交
            form.on('submit(addSubmit)', function(datas) {
                var data = datas.field;
                var para = {
                    "diccode": data.diccode,
                    "dicname": data.dicname,
                    "dicmemo": data.dicmemo,
                }
                addDic(para, function(res) {
                    if(res.code === 1) {
                        layer.close(addLayer);
                        $('#addDic').hide();
                        $('#addForm')[0].reset()
                        layer.msg(res.msg, {
                            time: 2000,
                            icon: 6
                        });
                        getList(1);
                    } else {
                        layer.msg(res.msg, {
                            time: 2000,
                            icon: 5
                        });
                    }
                })
                return false;
            });

            // 编辑提交
            form.on('submit(editSubmit)', function(datas) {
                var flag = true;
                var data = datas.field;
                var para = {
                    "id": id,
                    "diccode": data.diccode,
                    "dicname": data.dicname,
                    "dicmemo": data.dicmemo
                }
                editDic(para, function(res) {
                    if(res.code === 1) {
                        layer.close(editLayer);
                        $('#editForm').hide();
                        $('#editForm')[0].reset();
                        layer.msg(res.msg, {
                            time: 2000,
                            icon: 6
                        });
                        getList(1);
                    } else {
                        layer.msg(res.msg, {
                            time: 2000,
                            icon: 5
                        });
                    }
                });

                return false;
            });

            // 点击新增按钮
            $('#addBtn').on('click', function() {
                layer.ready(function() {
                    var index = layer.load(2);
                    addLayer = layer.open({
                        type: 1,
                        title: '新增',
                        content: $('#addDic'),
                        area: ['600px', '400px'],
                        cancel: function() {
                            //右上角关闭回调
                            $('#addDic').hide();
                            $('#addForm')[0].reset()
                            //return false 开启该代码可禁止点击该按钮关闭
                        }
                    });
                    layer.close(index);
                });

            });

            table.on('tool(tablelsit)', function(obj) {
                var data = obj.data;
                id = data.id;
                $(".diccode").val(data.diccode);
                if(obj.event === 'del') { //删除
                    layer.confirm('请确认是否删除？', function(index) {
                        var para = {
                            "id": id
                        }
                        delDic(para, function(res) {
                            if(res.code == 1) {
                                layer.msg(res.msg, {
                                    time: 2000,
                                    icon: 6
                                });
                                getList(1);
                            } else {
                                layer.msg(res.msg, {
                                    time: 2000,
                                    icon: 5
                                });
                            }
                        });
                        layer.close(index);
                    });
                } else if(obj.event === 'edit') { //编辑
                    layer.ready(function() {
                        var index = layer.load(2);
                        editLayer = layer.open({
                            type: 1,
                            title: "编辑",
                            content: $('#editDic'), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
                            area: ['485px', '400px'],
                            cancel: function() {
                                //右上角关闭回调
                                $('#editDic').hide();
                                $('#editForm')[0].reset()
                                //return false 开启该代码可禁止点击该按钮关闭
                            }
                        });
                        layer.close(index);
                    });
                    //获取编辑的值
                    form.val('editForm', {
                        "diccode": data.diccode,
                        "dicname": data.dicname,
                        "dicmemo": data.dicmemo
                    });
                } else if(obj.event === 'item') {
                    var url = skipurl('/systems/dics/items');
                    layer.ready(function() {
                        var index = layer.load(2);
                        layer.open({
                            type: 2,
                            title: '数据定义项管理',
                            content: url,
                            area: ['800px', '600px'],
                        });
                        layer.close(index);
                    });
                }
            });
        });
    });

    // 获取页面数据
    function getList(page, limit) {
        var para = {
            "page": page,
            "filters": filters,
            "limit": limit
        };
        getDicList(para, function(res){
            if(res.code === 1) {
                if(totalNUm != res.total) {
                    totalNUm = res.total;
                    per_page = res.limit;
                    renderPageBar(page,per_page)
                }

                table.render({
                    data: res.data,
                    elem: '#tablelsit',
                    limit:res.limit,
                    cols: [[
                        // {type: 'checkbox'},
                        {field: 'id', title: '序号', width: '10%', align:'center', templet: function(data){
                            var curPage = $(".layui-laypage-skip .layui-input").val();
                            return (curPage-1)*10 + data.LAY_INDEX;
                        }}, 
                        {field: 'diccode', title: '编码', width: '20%', align:'center' }, 
                        {field: 'dicname', title: '数据名称', width: '25%', align:'center'}, 
                        {field: 'dicmemo', title: '备注', width: '12%', align:'center'}, 
                        {fixed: 'right', title: '操作', toolbar: '#barDemo', align:'center'}
                    ]],
                    done: function(res, curr, count) {
                        // setBtnPermission();
                    },
                    page: false,
                    loading: true
                });
            } else {
                layer.msg(res.msg, {
                    time: 2000,
                    icon: 5
                });
            }
        });
    }

    // 渲染页面
    function renderPageBar(page,limit) {
        laypage.render({
            elem: 'pageBar',
            count: totalNUm, //数据总数，从服务端得到
            curr: page,
            first: '第一页',
            last: '最后一页',
            limit:limit,
            layout: ['limit','count', 'prev', 'page', 'next', 'skip'],
            jump: function(obj, first) {
                //首次不执行
                if(!first) {
                    layer.closeAll();
                    getList(obj.curr,obj.limit)
                }
            }
        });
    }

</script>
@endpush

@section('content')
<div class="layui-card">
    <div class="layui-card-body">
        <div class="layui-row">
            <form id="qryForm" class="layui-form" action="">
                <div class="layui-form-item">
                    <div class="layui-inline"> 
                        <label class="layui-form-label">数据名称：</label>
                        <div class="layui-input-inline">
                            <input name="dicname" autocomplete="off" placeholder="请输入" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button type="button" lay-submit lay-filter="queryBtn" class="layui-btn layui-btn-normal">查询</button>
                        <button type="button" lay-submit lay-filter="resetBtn" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
    
<div class="layui-card">
    <div class="layui-card-header" style="height: 60px;line-height: 60px;font-weight: bold">
        <div class="header-btn header-btn-add"><a href="#" id="addBtn" btnPermission="39" class="pear-btn pear-btn-primary pear-btn-sm" > 创建 </a></div>
    </div>
    <div class="layui-card-body" >
        <table class="layui-hide" id="tablelsit" lay-filter="tablelsit" lay-data="{id: 'tablelsit'}"></table>
        <div class="pagebarbox" style="text-align: end"><div id="pageBar" class="pagebar"></div></div>
        <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-primary layui-border-blue layui-btn-xs" btnPermission="42" lay-event="edit">编辑</a>
    
        <a class="layui-btn layui-btn-primary layui-border-blue layui-btn-xs" btnPermission="44" lay-event="item">定义项管理</a>
        <a class="layui-btn layui-btn-primary layui-btn-xs" btnPermission="43" lay-event="del">删除</a>
        </script> 
        <input type="hidden" class="diccode" />
    </div>
</div>

<!-- 新增界面 -->
<div id="addDic" class="dicDialog" style="display: none;padding: 20px">
    <form class="layui-form pop-form" action="" id="addForm" lay-filter="addForm">
        <div class="layui-form-item">
            <label class="layui-form-label"><i class="redstar">*</i>字典编码</label>
            <div class="layui-input-inline">
                <input type="text" name="diccode" required lay-verify="required" placeholder="请输入字典编码" lay-reqText="字典编码不能为空" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><i class="redstar">*</i>字典名称</label>
            <div class="layui-input-inline">
                <input type="text" name="dicname" required lay-verify="required" placeholder="请输入字典名称" lay-reqText="字典名称不能为空" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-inline">
                <input type="text" name="dicmemo" placeholder="请输入备注" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div style="text-align: center; clear: both;">
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="addSubmit" style="padding: 0 50px; margin-top: 20px;">提交</button>
        </div>
    </form>
</div>

<!-- 编辑界面 -->
<div id="editDic" class="dicDialog" style="display: none;padding: 20px">
    <form class="layui-form" action="" id="editForm" lay-filter="editForm">
        <div class="layui-form-item">
            <label class="layui-form-label"><i class="redstar">*</i>字典编码</label>
            <div class="layui-input-inline">
                <input type="text" name="diccode" required lay-verify="required" placeholder="请输入字典编码" lay-reqText="字典编码不能为空" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label"><i class="redstar">*</i>字典名称</label>
            <div class="layui-input-inline">
                <input type="text" name="dicname" required lay-verify="required" placeholder="请输入字典名称" lay-reqText="字典名称不能为空" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-inline">
                <input type="text" name="dicmemo" placeholder="请输入备注" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div style="text-align: center; clear: both;">
            <button class="layui-btn  layui-btn-normal" lay-submit lay-filter="editSubmit" style="padding: 0 50px; margin-top: 20px;">提交</button>
        </div>

    </form>
</div>
@endsection
